<template>
  <div class="disabled-page">
    <div class="disabled-content">
      <svg t="1755568079282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5514" width="60" height="60"><path d="M459.35 524.72c130 0 235.47-102.93 235.47-229.86S589.39 65 459.35 65 223.88 167.89 223.9 294.86s105.42 229.86 235.45 229.86z" p-id="5515"></path><path d="M768.5 580C664.39 580 580 664.39 580 768.5S664.39 957 768.5 957 957 872.6 957 768.5 872.61 580 768.5 580z m27.39 303.37A18.85 18.85 0 0 1 777 902.22h-17a18.85 18.85 0 0 1-18.85-18.85v-17.68A18.85 18.85 0 0 1 760 846.84h17a18.85 18.85 0 0 1 18.85 18.85z m0-86.6A18.84 18.84 0 0 1 777 815.62h-17a18.84 18.84 0 0 1-18.85-18.85V669.54A18.85 18.85 0 0 1 760 650.69h17a18.85 18.85 0 0 1 18.85 18.85z" p-id="5516"></path><path d="M513 767a253.45 253.45 0 0 1 90.15-194.07 314.52 314.52 0 0 0-35.86-2.06H371c-168 0-304.16 132.93-304.16 296.91v19.15c0 67 136.18 67.08 304.16 67.08h224.09A253.34 253.34 0 0 1 513 767z" p-id="5517"></path></svg>
      <h1 class="disabled-title">账号已被禁用</h1>
      <p class="disabled-desc">很抱歉，您的账号已被禁用。如有疑问，请联系管理员。</p>
      <base-button type="primary" @click="handleLogout">退出登录</base-button>
    </div>
  </div>
</template>

<script>
export default{
  name:'DisabledPage',
  methods:{
    handleLogout(){
      this.outLogin()
    }
  }

}
</script>

<style lang="scss" scoped>
.disabled-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;

  .disabled-content {
    text-align: center;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .disabled-icon {
    width: 120px;
    margin-bottom: 24px;
  }

  .disabled-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 16px;
  }

  .disabled-desc {
    font-size: 14px;
    color: #909399;
    margin-bottom: 24px;
  }
}
</style>
